<template>
  <view v-if="open">
    <u-navbar
      :placeholder="true"
      :titleStyle="{ color: '#ffffff' }"
      leftIconColor="#ffffff"
      bgColor="#3775cb"
      :autoBack="true"
    >
      <template #right>
        <view @click="submitForm">
          <up-text color="#ffffff" text="提交"></up-text>
        </view>
      </template>
    </u-navbar>

    <view
      style="
        margin: 25rpx;
        background-color: #ffffff;
        padding: 15rpx 15rpx 15rpx 15rpx;
        border-radius: 15rpx;
      "
    >
      <view
        v-if="!customerId"
        @click="openSelectCus"
        style="padding: 20rpx 30rpx; background-color: #f7f7f7; margin: 15rpx 0"
      >
        <text style="padding-top: 14rpx; font-size: 26rpx; width: 450rpx">
          选择客户{{ formData!.customerLabel ? '：' + formData!.customerLabel : '' }}
        </text>
      </view>
      <CusPicker
        v-model:labels="formData!.customerLabel"
        v-model="formData!.customerId"
        ref="cusPicker"
      />
      <u--form
        labelPosition="left"
        :model="formData"
        ref="form"
        :borderBottom="true"
        labelWidth="68"
      >
        <u-form-item label="客户姓名" prop="name" ref="item1" :borderBottom="true">
          <u--input v-model="formData.name" border="none"></u--input>
        </u-form-item>
        <u-form-item prop="name" ref="item1" label="联系方式" :borderBottom="true">
          <up-row>
            <up-col span="4">
              <view
                @click="show = true"
                style="
                  font-size: 26rpx;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
              >
                <text v-if="!formData?.contactWayId" style="color: #999999">选择联系方式</text>
                {{ formData?.contactWayLabel }}
              </view>
            </up-col>
            <up-col span="8">
              <view>
                <u--input v-model="formData.value" border="none"></u--input>
              </view>
            </up-col>
          </up-row>
        </u-form-item>

        <u-form-item label="客户地址" prop="name" ref="item1" :borderBottom="true">
          <u--input v-model="formData.address" border="none"></u--input>
        </u-form-item>
      </u--form>

      <view>
        <u-popup :show="show" @close="show = false">
          <view style="padding: 20rpx">
            <u-radio-group v-model="formData.contactWayId" iconPlacement="right" placement="column">
              <u-radio
                :customStyle="{ marginBottom: '8px' }"
                v-for="(item, index) in contactWayList"
                :key="index"
                :label="item.label"
                :name="item.contactWayId"
                @change="changeFollowWay"
              >
              </u-radio>
            </u-radio-group>
          </view>
        </u-popup>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import CusPicker from '@/components/customer/cus-picker.vue'
import {
  getFollowRecordAPI,
  postFollowRecordAPI,
  putFollowRecordAPI,
} from '@/services/followRecord'
import { getContactWayListAPI, getFollowWayListAPI } from '@/services/common'
import { getContactAPI, postContactAPI, putContactAPI } from '@/services/contact'
// 接收页面参数
const query = defineProps<{
  fromPage: string
  customerId: string | number
  contactId: string
}>()
const open = ref(false)
const show = ref(false)
const formData = ref<any>({
  contactId: undefined,
  customerId: query.customerId,
  userId: undefined,
  value: undefined,
  name: undefined,
  contactWayId: undefined,
  address: undefined,
  remark: undefined,
})

const cusPicker = ref<InstanceType<typeof CusPicker>>()

const contactWayList = ref<any[]>([])

const submitForm = async (e) => {
  if (formData.value.contactId) {
    const res = await putContactAPI(formData.value)
  } else {
    const res = await postContactAPI(formData.value)
  }
  navigateBack()
}

const navigateBack = async () => {
  if (query.fromPage) {
    let pages = getCurrentPages()
    let page: any = pages[pages.length - 2]
    page.$vm.$.exposed.refreshContactList({
      contactId: query.contactId,
    })
  }
  uni.navigateBack({
    delta: 1,
  })
}

const openSelectCus = async () => {
  cusPicker.value!.open()
}

const getContact = async () => {
  if (query.contactId) {
    let res = await getContactAPI(query.contactId)
    formData.value = res.data
  }
}

const getContactWayList = async () => {
  let res = await getContactWayListAPI()
  contactWayList.value = res.data
}

const changeFollowWay = async (e: any) => {
  for (const i in contactWayList.value) {
    if (contactWayList.value[i].contactWayId === e) {
      formData.value.contactWayLabel = contactWayList.value[i].label
    }
  }
  show.value = false
}

// 组件挂载完毕
onMounted(() => {
  open.value = true
  getContactWayList()
  getContact()
})
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
}
</style>
